<template>
  <ul id="tab-bar">
    <li><router-link to="/msite" active-class="tabbar-active"><i class="iconfont">&#xe64f;
</i><span>外卖</span></router-link></li>
    <li><router-link to="/discover" active-class="tabbar-active"><i class="iconfont">&#xe62a;
</i><span>发现</span></router-link></li>
    <li><router-link to="/order" active-class="tabbar-active"><i class="iconfont">&#xe6e3;
</i><span>订单</span></router-link></li>
    <li><router-link to="/profile" active-class="tabbar-active"><i class="iconfont">&#xe612;
</i><span>我的</span></router-link></li>
  </ul>
</template>

<script>
export default {
  name: 'tabbar'
}
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  #tab-bar {
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 100;
    height: px2rem(100);
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 4px rgba(0,0,0,.1);
    li {
      flex: 1;
      color: #666;
      padding-top: px2rem(15);
        a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: px2rem(20);
          color: #666;
          text-decoration: none;
          i {
            font-size: px2rem(40);
          }
        }
        .tabbar-active{
          color: #0089dc;
        }
    }
  }

</style>


